<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
	<title>Document</title>
	<style type="text/css">
*{
	padding: 0;
	margin: 0;
}

 	li{
 		list-style: none;
 	}
	.list{
		background-color: #f0f;
		overflow: hidden;
		/*float: left;*/
	}
	.list li{
		height: 200px;
		float: left;
		background-color: #ff0;
		margin: 1%;
	}








	/*媒体查询语句必须放在最后面*/
	@media screen and (min-width: 320px) and (max-width: 414px){
		.list li{
			width: 98%;
		}
	}
	@media screen and (min-width: 415px) and (max-width: 1024px){
		.list li{
			width: 48%;
		}
	}
	@media screen and (min-width: 1025px){
		.list li{
			width: 31.3333%;
		}
	}
	@media screen and (min-width: 1200px){
		
		.list{
			width: 1200px;
			margin-left: auto;
			margin-right: auto;
		}
	}
	.list img{
		width: 100%;
	}
	</style>
</head>
<body>
	<ul class="list">
		<li>
			<img src="1.gif" alt="">
		</li>
		<li>
			<img src="1.gif" alt="">
		</li>
		<li>
			<img src="1.gif" alt="">
		</li>
		<li>
			<img src="1.gif" alt="">
		</li>
		<li>
			<img src="1.gif" alt="">
		</li>
		<li>
			<img src="1.gif" alt="">
		</li>
		<li>
			<img src="1.gif" alt="">
		</li>
		<li>
			<img src="1.gif" alt="">
		</li>
		<li>
			<img src="1.gif" alt="">
		</li>
		<li>
			<img src="1.gif" alt="">
		</li>
	</ul>
</body>
</html>